<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轻松批</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
    <link rel="stylesheet" href="css/Animate.css">
</head>

<body>
    <!-- 包裹层 -->
    <div class="wrap">
        <!-- 顶部部分 -->
        <div class="top">
            <div class="content">
                <div class="top_left">
                    <img src="img/logo.png" alt="">
                    <span>让批发更轻松</span>
                </div>
                <div class="top_mid">
                    <ul id="nav" class="animated fadeInLeft">
                        <li class="active"><a href="index.html"><span>首页</span></a></li>
                        <li><a href="service.html"><span>服务</span></a></li>
                        <li><a href="price.html"><span>定价</span></a></li>
                        <li><a href="about.html"><span>关于</span></a></li>
                    </ul>
                </div>
                <div class="top_right">
                    <button>立即申请</button>
                    <span>123456789</span>
                    <img src="img/h24.png" alt="">
                </div>
            </div>
        </div>
        <!-- 轮播部分 -->
        <div class="banner">
            <div class="content">
                <div class="banner_left animated slideInLeft">
                    <h1>批发，从未如此轻松</h1>
                    <p>
                        重新定义批发，为您连接所有客户<br>
                        拥抱移动互联，助您生意再次腾飞
                    </p>
                    <button>申请免费试用</button>
                </div>
                <img src="img/p1.png" alt="" class="animated rotateIn">
            </div>
        </div>
        <!-- 推荐部分 -->
        <div class="tuijian">
            <div class="content">
                <ul>
                    <li>
                        <div class="tuijian_box">
                            <img src="img/p2.png" alt="">
                            <h1>掌控店铺</h1>
                            <p>
                                实时数据同步，了解店铺运营情况<br>
                                所有店铺状态，随时随地一手掌握
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="tuijian_box">
                            <img src="img/p3.png" alt="">
                            <h1>安全稳定</h1>
                            <p>
                                数据多重加密，确保安全<br>
                                阿里云服务器，稳定无忧
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="tuijian_box">
                            <img src="img/p4.png" alt="">
                            <h1>无需网络</h1>
                            <p>
                                离线操作+在线数据同步，多点共用<br>
                                没有网络也不影响生意，全国唯一
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="tuijian_box">
                            <img src="img/p5.png" alt="">
                            <h1>专属网店</h1>
                            <p>
                                专属独立网商，防止对比<br>
                                扫码才可进入，拒绝仿版
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 优势部分 -->
        <div class="youshi">
            <div class="content">
                <div class="youshi_header">
                    <h1>三大优势<span>祝你生意腾飞</span></h1>
                    <span>我们所做的一切，只为你的生意更好！</span>
                </div>
                <div class="youshi_body">
                    <div class="youshi_box">
                        <img src="img/p6.png" alt="">
                        <h3>你的独立网商</h3>
                        <p>即刻拥有你的专属网商平台，扫码访问你的店铺捧在他的手心里</p>
                    </div>
                    <div class="youshi_box">
                        <img src="img/p7.png" alt="">
                        <h3>你的独立网商</h3>
                        <p>即刻拥有你的专属网商平台，扫码访问你的店铺捧在他的手心里</p>
                    </div>
                    <div class="youshi_box">
                        <img src="img/p8.png" alt="">
                        <h3>你的独立网商</h3>
                        <p>即刻拥有你的专属网商平台，扫码访问你的店铺捧在他的手心里</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商店部分 -->
        <div class="shop">
            <div class="content">
                <div class="shop_header">
                    <div class="active shop_header_content">云商店</div>
                    <div class="shop_header_content">进销存</div>
                    <div class="shop_header_content">商米v1</div>
                </div>
                <div class="three_cont">
                    <div class="cont three_cont1">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>你独有的网店<span>-轻松批云商店</span></h1>
                                <p>轻松批展示店专为批发商进行开发，让您拥有独立的、安全的展示空间，所有数据直接在APP上即可进行编辑，提供全面的展示、交易、售后服务，为您的批发事业插上互联网的翅膀！
                                </p>
                                <p><span>无限容量空间</span><br><span>一键生成二维码</span><br><span>免费公众号服务</span></p>
                                <button>进入示范店铺</button>
                            </div>
                            <img src="img/p11.png" alt="">
                        </div>
                    </div>
                    <div class="cont three_cont2">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>管店无忧<span>-轻松批进销存</span></h1>
                                <p>一套专为批发设计的进销存软件，为您实时监控您店铺的营业情况，并为您的店员提供最快速、专业的开单工具，从此不再为账务和库存担忧，随时随地轻松管店！</p>
                                <p><span>全面支持离线操作</span><br><span>有网实时数据同步</span><br><span>专为批发优化流程</span></p>
                                <button>了解更多</button>
                            </div>
                            <img src="img/p1.png" alt="">
                        </div>
                    </div>
                    <div class="cont three_cont3">
                        <div class="shop_body_left">
                            <div class="shop_body_left1">
                                <h1>开单小王子<span>-商米V1</span></h1>
                                <p>由小米制造商专业设计开发并生产，集开单、打印、联网于一体的商业专用设备，搭载商业版安卓系统和轻松批进销存软件，一台设备集成开店所需的所有功能，让店铺更加整洁，让管理更加专业！
                                </p>
                                <p><span>超大电量—充满电用3天</span><br><span>超速打印技术—10秒/米</span><br><span>安全稳定—无故障使用三年</span>
                                </p>
                                <button>了解更多</button>
                            </div>
                            <img src="img/p10.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 帮助部分 -->
        <div class="help">
            <div class="content">
                <div class="help_header">
                    <h1>我们如何帮助客户成功</h1>
                </div>
                <hr>
                <div class="help_body">
                    <img src="img/p6.png" alt="">
                    <div class="help_body_right">
                        <p>轻松批让我不再像以前一样每天都要守在店里观察客户情况，在家里打开手机就可以看到店铺整体的业务情况，让我有更多时间在面料、工厂、和款式上下功夫，自带的销量库存报告让我可以很准确的进货下单
                        </p>
                        <p>并且轻松批提供的网上店铺，更方便我的客户看新款，我也不用发微信来骚扰客户，现在的老客户越来越多！用轻松批，说老实话并没有轻松多少，但是生意变好了很多！继续加油！！！
                        </p>
                        <div class="help_body_right_bottom">
                            <div class="help_body_right_bottom_left">
                                <h3>杨渊心</h3><br><span>味道档口老板，美衣城c071档</span>
                            </div>
                            <p>WEIDAO</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 联系部分 -->
        <div class="contact">
            <div class="content">
                <div class="contact_left">
                    <h1>留下您的电话，我们第一时间联系您</h1>
                    <form action="">
                        <input type="text" name="" id="" placeholder="姓名">
                        <input type="tel" name="" id="" placeholder="电话号码"><br>
                        <input type="email" class="email" name="" id="" placeholder="邮箱"><br>
                        <textarea name="" id="" cols="30" rows="10" placeholder="内容"></textarea>
                        <br><input type="submit" value="提交" class="submit">
                        <br>
                        <p>温馨提示：可以在内容中填写您的店铺地址，在开通业务的地区，我们提供上门服务！</p>
                    </form>
                </div>
                <img src="img/p12.png" alt="">
            </div>
        </div>
        <!-- 试用部分 -->
        <div class="footer">
            <div class="content">
                <div class="footer_left">
                    <p>轻松批，让批发更轻松！！！</p>
                </div>
                <div class="footer_right">
                    <button>免费试用版本</button>
                </div>
            </div>
        </div>
        <!-- 底部部分 -->
        <div class="bottom">
            <div class="content">
                <ul>
                    <li>
                        <div class="bottom_box">
                            <h1>关于我们</h1>
                            <p>轻松批是广州市晶焰网络科技有限公司专为批发行业开发的成套批发管理工具，我们致力于解决批发行业的各种痛点，并未客户提供更好和更优质的产品。</p>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>合作伙伴</h1>
                            <span style="color: rgb(0,120,0);">阿里云—阿里巴巴网络服务平台</span>
                            <span>商米—小米控股商用设备提供商</span>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>联系方式</h1>
                            <span><img src="../qingsongpi/img/1-email.png">qsp@baokuant.com</span>
                            <span><img src="../qingsongpi/img/1-phone.png">+86 13826027418</span>
                            <span><img src="../qingsongpi/img/1-address.png">广州市越秀区人民南路88号肯德基二楼</span>
                        </div>
                    </li>
                    <li>
                        <div class="bottom_box">
                            <h1>帮助与支持</h1>
                            <span><img src="img/1-list.png">使用帮助</span>
                            <span><img src="img/1-phone.png">+86 13826027418</span>
                            <span><img src="img/1-address.png">广州市越秀区人民南路88号肯德基二楼</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 返回顶部 -->
        <div style="display:none;" class="back-to" id="toolBackTop">
                <a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"></a>
            </div>
    </div>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('.shop_header').on('mouseover', '.shop_header_content', function () {
            var currentIndex = $(this).index() + 1;
            hideAll();
            hideAllTop();
            $(this).css('background-color', 'rgb(150, 130, 130)');
            $('.three_cont' + currentIndex).show();
        });


        function hideAll() {
            for (var i = 1; i < 4; i++) {
                $('.three_cont' + i).hide();
            }
        }

        function hideAllTop() {
            for (var i = 0; i < 3; i++) {
                $('.shop_header_content').eq(i).css('background-color', 'rgb(240, 60, 60)');
            }
        }
    </script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(function () {
            var bt = $('#toolBackTop');
            var sw = $(document.body)[0].clientWidth;

            var limitsw = (sw - 840) / 2 - 80; //距离右侧距离
            if (limitsw > 0) {
                limitsw = parseInt(limitsw);
                bt.css("right", limitsw / 8);
            }

            $(window).scroll(function () {
                var st = $(window).scrollTop();
                if (st > 30) {
                    bt.show();
                } else {
                    bt.hide();
                }
            });
        });
    </script>
    <script type="text/javascript">
        var tit = document.getElementById("nav");
        //alert(tit);
        //占位符的位置
        var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
        var inser = document.createElement("div");
        tit.parentNode.replaceChild(inser, tit);
        inser.appendChild(tit);
        inser.style.height = rect.height + "px";
    
        //获取距离页面顶端的距离
        var titleTop = tit.offsetTop;
        //滚动事件
        document.onscroll = function () {
            //获取当前滚动的距离
            var btop = document.body.scrollTop || document.documentElement.scrollTop;
            //如果滚动距离大于导航条据顶部的距离
            if (btop > titleTop) {
                //为导航条设置fix
                tit.className = "clearfix fix";
            } else {
                //移除fixed
                tit.className = "clearfix";
            }
        }
    </script>
</body>

</html>